<template>
  <basic-container>
    <el-descriptions
      :title="`尊敬的${userInfo.real_name}${['采购', '供应商'][userInfo.supplier_flag]}您好 `"
      direction="vertical"
      :column="4"
      border
    >
      <el-descriptions-item label="用户名">{{ userInfo.real_name }}</el-descriptions-item>
    </el-descriptions>
    <br />
    <foldable-card header="选择供应商">
      <el-button type="primary" @click="showSuppliers"> 选择供应商 </el-button>
      <material-classify v-model="value" />
      <el-button type="primary" @click="showMaterials"> 选择物料分类 </el-button>
      <leading v-model="value" />
    </foldable-card>
  </basic-container>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Welcome',
  data: () => ({ value: [] }),
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    showSuppliers() {
      this.$quickModal({
        title: '选择供应商',
        width: '800px',
        componentIsTag: true,
        component: 'suppliers',
        props: {
          multiple: true
        },
        on: {
          change: row => {
            console.log(row)
          }
        }
      })
    },
    showMasterialClassify() {
      this.$quickModal({
        title: '选择物料分类',
        width: '400px',
        component: h =>
          h('material-classify', {
            props: { value: this.value },
            on: {
              input: v => (this.value = v)
            }
          })
      })
    },
    showMaterials() {
      this.$quickModal({
        title: '选择物料分类',
        width: '800px',
        componentIsTag: true,
        component: 'materials',
        props: {
          multiple: true
        },
        on: {
          change: row => {
            console.log(row)
          }
        }
      })
    },
  }
}
</script>
